<template>
	<m-layout title="轉帳" gap="24">
		<view slot="right"><text @click="Jump(`/pages/wallet/transfer/recode/recode?coinid=${coinid}`)">轉帳記錄</text></view>
		<m-block gap="40 30" class="block2">
			<view class="head title flex-between mb-48 border-bottom">
				<view class="flex">
					<m-icon type="bzxz" size="36" class="mr-8" />
					<text>資產類型</text>
				</view>
				<view class="flex">
					<text class="coinType" v-if="nowCoin['coinname']">{{ nowCoin['coinname'] }}</text>
				</view>
			</view>
			<view class="flex-columnm border-bottom pb-24 mb-24">
				<view class="flex mb-8 title">
					<m-icon type="mbdz" size="36" class="mr-8" />
					<text>目標帳號</text>
				</view>
				<view class="formitem flex-between pb-24">
					<input type="text" v-model="username" disabled="true" placeholder="請輸入目標帳號" placeholder-class="cell-input" />
				</view>
			</view>
			<view class="flex-columnm border-bottom pb-24 mb-24">
				<view class="flex mb-8 title">
					<m-icon type="tbsl" size="36" class="mr-8" />
					<text>轉帳數量</text>
				</view>
				<view class="formitem flex-between">
					<input type="number" v-model="amount" placeholder="請輸入數量" placeholder-class="cell-input" />
					<text @click="showHand">全部</text>
				</view>
				<view class="balance flex mt-12">
					<text>可用餘額：</text>
					<text>{{ nowBalance['balance'] }}</text>
					<text class="ml-8">{{ nowCoin['coinname'] }}</text>
				</view>
			</view>
			<view class="title sxf flex-between mt-48">
				<view class="flex">
					<m-icon type="fee" size="36" class="mr-8" />
					<text>手續費</text>
				</view>

				<template v-if="amount">
					<text>{{ times(fee, amount) }}</text>
				</template>
				<template v-else>
					<text>{{ fee * 100 }} %</text>
				</template>
			</view>
			<!-- <m-block bgColor="unset" gap="36 0" class="block3">
				<text class="title">注意：</text>
				<text>1.最少转账数量：{{ config704 }} {{ nowCoin['coinName'] }}；</text>
				<text>2.请反复确认目标账号是否正确，交易一旦发出将无法撤回。</text>
			</m-block> -->
			<view class="btn-box">
				<m-button @click="verify">{{btnText}}</m-button>
			</view>
		</m-block>

		<m-pay :title="nowCoin['coinname'] + '轉帳'" :isPay="true" :isShow="show" :showCancel="true" @handleConfirm="transfer" @handleCancel="show = false">
			<view class="pay-Box">
				<view class="hint flex-between">
					<text>目標帳號</text>
					<text>{{ username }}</text>
				</view>
				<view class="hint flex-between">
					<text class="fw-600">手續費</text>
					<text>{{ times(fee, amount) }}</text>
				</view>
				<view class="hint flex-between">
					<text>總需支付</text>
					<text>{{ payTotal }}</text>
				</view>
			</view>
		</m-pay>
	</m-layout>
</template>

<script>
import { balance } from '@/api/Users.js';
import { Transfer, GetTransferAccount } from '@/api/Trade.js';
import { mapState } from 'vuex';
export default {
	data() {
		return {
			amount: '',
			username: '',
			userStatus: -1, //目标转账是否存在
			coinid: '1',
			show: false,
			type: 0,
			payTotal: 0, // 总需支付
			errorMsg: '',
			btnText:"確認",
		};
	},
	computed: {
		...mapState({
			coinConfig: (state) => state.general.coinConfig,
			userbalance: (state) => state.user.userbalance,
			config: (state) => state.general.config
		}),
		nowCoin() {
			return this.coinConfig[this.coinid];
		},
		nowBalance() {
			return this.userbalance[this.coinid];
		},
		fee() {
			return this.nowCoin['feetransfer'];
		}
	},
	watch: {
		amount() {
			this.needPay();
		}
	},
	onLoad({ coinid }) {
		this.coinid = coinid || '1';
		this.init();
	},
	methods: {
		needPay() {
			this.payTotal = this.plus(this.amount, this.times(this.fee, this.amount));
		},
		// 初始化
		async init() {
			// 获取余额列表
			const res = await balance();
			console.log('res===>', res);
			const { data, success, msg } = await GetTransferAccount();
			if (!success) {
				this.Toast(msg || '没有查询目标账号');
				this.btnText = '暫不支持轉帳'
			}
			if (success) this.username = data;
		},
		//梭哈
		showHand() {
			console.log('this.fee', this.fee);
			this.amount = this.integer(this.divide(this.nowBalance['balance'], this.plus(1, this.fee)), 2);
			this.needPay();
		},
		// 提交用户转账
		async transfer(pwd) {
			console.log('pwd===>', pwd);
			const { success, msg } = await Transfer({
				amount: this.amount,
				coinid: Number(this.coinid),
				paypassword: pwd,
				touser: this.username,
				paytype: 1
			});
			this.Toast(msg);
			if (success) {
				this.amount = '';
				// this.username = '';
				this.show = false;
				this.Toast('操作成功');
				setTimeout(() => {
					this.Jump(`/pages/wallet/transfer/recode/recode?coinid=${this.coinid}&type=3`);
				}, 500);
			}
		},
		verify() {
			if (!this.username) return ;
			// if (this.userStatus != 1) return this.Toast('请查询目标账号是否存在');
			if (!Number(this.amount)) return this.Toast('请输入转账账数量');
			// if (this.amount < Number(this.config704)) return this.Toast('最少转账数量' + this.config704);
			this.show = true;
		}
	}
};
</script>

<style lang="scss">
.block2 {
	.head {
		padding-bottom: 20rpx !important;

		& > text:nth-of-type(1) {
			font-weight: 600;
		}
	}

	.title {
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 600;
		color: #333333;
		padding-bottom: 10rpx;

		.coinType {
			padding-right: 10rpx;
		}
	}

	.formitem {
		padding: 24rpx 20rpx;
		border-radius: 12rpx;
		background: #f6f6f6;
		border-bottom: 1rpx solid #eeeeee;

		input {
			flex: 1;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
		}

		text {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}

		.cell-input {
			color: #d4d4d4;
		}
	}

	.hint-search {
		text {
			display: block;
			margin-top: -10rpx;
			padding-bottom: 20rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
		}
	}

	.searchUser {
		padding: 24rpx 0rpx;
		margin-bottom: 30rpx;
		border-radius: 10rpx;
		// background: #d3d3d3;
		border-bottom: 1rpx solid #eeeeee;

		image {
			border-radius: 100%;
		}

		text {
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		.error {
			color: #dd524d !important;
		}
	}

	.balance {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #f55519;
		// padding-bottom: 30rpx;
	}

	.sxf {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 600;
	}
}

.block3 {
	background: #f6f6f6;
	border-radius: 10rpx;
	padding: 35rpx 38rpx;
	margin-top: 30rpx;

	.title {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	text {
		display: block;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}

	text + text {
		padding-top: 26rpx;
	}
}

.btn-box {
	padding: 150rpx 0 84rpx;
}

.pay-Box {
	padding: 0 36rpx;
	font-size: 28rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;

	text:nth-of-type(1) {
		color: #999999;
	}

	text:nth-of-type(2) {
		color: #333333;
	}

	view + view {
		padding-top: 20rpx;
	}
}
</style>
